<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>CS易办：让事更容易办</title>
    <link rel="stylesheet" th:href="@{static/css/loginStyle.css}">
    <script type="text/javascript">
        function checkInput() {
            var username = document.getElementById('username_input').value;
            var password = document.getElementById('password_input').value;
            document.getElementById('login_button').disabled = username === '' || password === '';
        }
    </script>
</head>
<body onload="checkInput()">
<div th:id="login_form">
    <form action="#" th:action="@{login}" method="post" th:object="${loginUser}">
        <table th:id="login_data_table">
            <tr>
                <td>用户名</td>
                <td><input type="text" th:field="*{username}" th:id="username_input" onkeyup="checkInput()"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" th:field="*{password}" th:id="password_input" onkeyup="checkInput()"></td>
            </tr>
            <tr>
                <td>
                    <select id="user_role" th:field="*{role}">
                        <option value="student">学生</option>
                        <option value="teacher">教师</option>
                    </select>
                </td>
                <td><button type="submit" th:id="login_button" disabled>登录</button></td>
            </tr>
            <span th:if="${verifyFailed}" style="color: red">账号、密码或身份错误</span>
        </table>
    </form>
</div>
</body>

